import {useState} from 'react'
import { Menu } from "antd";
import {
    EnvironmentOutlined,
    AppstoreOutlined,
    SettingOutlined,
} from "@ant-design/icons";
//引入编程式导航的方法
import { useNavigate,useLocation } from "react-router-dom";
function getItem(label, key, icon, children, type) {
  return {
      key,
      icon,
      children,
      label,
      type,
  };
}
const items = [
  getItem("首页", "/home", <AppstoreOutlined />),
  getItem("系统管理", "sub2", <EnvironmentOutlined />, [
      getItem("菜单管理", "/menu"),
      getItem("角色管理", "/role"),
      getItem("管理员管理", "manage"),

  ]),
  getItem("商城管理", "sub4", <SettingOutlined />, [
      getItem("商品分类", "cate"),
      getItem("商品规格", "specs"),
      getItem("商品管理", "7"),
      getItem("会员管理", "8"),
      getItem("轮播图管理", "9"),
      getItem("秒杀活动", "10"),
  ]),
];
function Nav() {
   const Navigate = useNavigate();
   const Location = useLocation()
   console.log(Location,'1111');
   let [selectkey] = useState(['/home'])
   const clickInfo = (e) =>{
    console.log(e,'eeee');
    Navigate('/index' +e.key)
   }
  return (
    <div>
      <Menu
        style={{
          width: 256,
          minHeight:650,
        }}
        defaultSelectedKeys={selectkey}
        selectedKeys={Location.pathname.slice(6)}
        onClick={clickInfo}
        mode="inline"
        items={items}
      />
    </div>
  )
}
export default Nav